import Head from "./components/Head";
import AddFile from "./components/AddFile";
import Select from "./components/Select";
import List from "./components/List";
import Rmove from "./components/Rmove";
import Paging from "./components/Paging";
import { IParameterar, IFile } from "./types/index";
import { message } from "antd";
import { useState, useEffect } from "react";
import $http from "./axios";
import { API } from "./axios";

function App() {
    const [lists, setLists] = useState<IParameterar>({
        paegNo: 0, //当前页数
        pageSize: 0, // 每页展示几条
        pagesCount: 0, // 共几页
        total: 0, // 共多少个文件
        files: [
            {
                name: "test",
                change: false
            }
        ] // 文件数据
    });

    // 默认一页 10 个文件
    const getFiles = (pageNo: number = 1, pageSize: number = 10): void => {
        $http
            .get(API + `?pageNo=${pageNo}&pageSize=${pageSize}`)
            .then(({ data }: any) => {
                console.log(data);
                setLists(data);
            })
            .catch((err: string | undefined) => {
                new Error(err);
            });
    };

    useEffect(function () {
        getFiles();
    }, []);

    // 更新文件列表的方法
    const updateLists = (lists: IParameterar): void => {
        setLists(lists as IParameterar);
    };

    // 文件被选中事件
    const fileChange = (name: string, change: boolean): void => {
        setLists({
            ...lists,
            files: lists.files.map((item: IFile) => {
                if (item.name === name) {
                    item.change = change;
                }
                return item;
            })
        });
    };

    // 反选
    const contrary = (): void => {
        setLists({
            ...lists,
            files: lists.files.map((item: IFile) => {
                item.change = !item.change;
                return item;
            })
        });
    };

    // 删除
    const removefiles = (password: string): void => {
        let names: string[] = [];
        lists.files.forEach((item: { change: any; name: string }) => {
            if (item.change) {
                names.push(item.name);
            }
        });
        if (names.length === 0) {
            message.warning("选文件啊！");
            return;
        }
        $http
            .delete(API, {
                data: {
                    files: names,
                    psw: password
                }
            })
            .then(({ data }: any) => {
                if (data.code === 200) {
                    message.success("删除成功！");
                    getFiles();
                } else if (data.code === 401) {
                    message.error("密码错误！");
                } else {
                    message.warning("后端多半炸了");
                }
            });
    };

    return (
        <>
            <Head />
            <main>
                <div className="upload">
                    <AddFile getFiles={getFiles} />
                    <Select pageSize={lists.files?.length || 10} updateLists={updateLists} />
                </div>
                {lists.files?.length > 0 ? (
                    <ul className="mainBox">
                        {lists.files.map((item: IFile) => {
                            return <List file={item} key={item.name} fileChange={fileChange} />;
                        })}
                    </ul>
                ) : (
                    <div className="null">暂 无 此 文 件!</div>
                )}
                <div className="bottomBox">
                    <Paging filelist={lists} getFiles={getFiles} />
                    <Rmove contrary={contrary} removefiles={removefiles} />
                </div>
            </main>
        </>
    );
}

export default App;
